<template>
    <div id="template">
        <!-- <h1 class="title">工单导入</h1> -->
        <!-- <el-divider></el-divider> -->
        <h2>
            <i class="el-icon-menu"></i>
            模板文件
        </h2>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column align="center" prop="template" label="模板名称"></el-table-column>
            <el-table-column align="center" prop="name" label="元数据模板"></el-table-column>
            <el-table-column align="center" prop="file" label="文件名"></el-table-column>
            <el-table-column align="center" width="200px" label="操作">
                <template slot-scope="scope">
                  <a href="https://data.xiaoxiangai.com/stage-api/profile/template/template.xlsx">下载模板</a>
                </template>
            </el-table-column>
        </el-table>
        <p>备注: 导入元数据前请下载对应的元数据导入模板，严格按照导入要求进行操作。</p>
        <p>备注: event_1标识默认埋点事件属性，event_2标识自定义埋点事件属性，user标识用户属性。</p>

    <!--    <h2>
            <i class="el-icon-upload"></i> 元数据导入
            <el-select v-model="appType" placeholder="请选择应用类型" @change="appTypeChangeFun">
              <el-option
                v-for="dict in teamOptions"
                :key="dict.id"
                :label="dict.teamName"
                :value="dict.id"
              ></el-option>
            </el-select>
        </h2>-->
        <el-upload class="upload-demo"
                   drag :action="importUrl"
                   :on-error="uploadFileError"
                   :data="uploadData"
                   :headers="headers"
                   :on-success="uploadFileSuccess"
        >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
                将文件拖到此处，或
                <em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">只能上传.xls/.xlsx，且不超过500kb</div>
        </el-upload>
        <div v-show="errorListData.length>0">
             <h1 style="text-align: left;font-size:15px;">导入结果：<span style="color:red;">{{errorMessage}}</span></h1>
             <el-divider></el-divider>
            <el-table :data="errorListData" border style="width: 100%;height:400px;overflow: auto;">
                <el-table-column align="center"  label="编号" type="index"></el-table-column>
                <el-table-column align="center" prop="rowNum" label="异常行"></el-table-column>
                <el-table-column align="left" prop="errorMessage" label="异常内容"></el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import {listApplication} from "@/api/config/application";
import {eventTeamDataFun} from "@/api/config/eventteam";
import {getToken} from "@/utils/auth";

export default {
    name: 'importData',
    data() {
        return {
            importUrl:process.env.VUE_APP_BASE_API + "/config/data/importData",
            headers: {
              Authorization: "Bearer " + getToken(),
            },
            errorListData:[],
            teamOptions:[],
            errorMessage:'',
            appType:'',
            uploadData:{
              appCode:''
            },
            tableData: [
                {
                    template: '元事件',
                    name: '元事件导入模板.xls',
                    file: 'eventTempate.xlsx'
                }
            ]
        };
    },
    created() {
      this.getEventTeamList();
    },
    mounted() {},
    methods: {
      getteamOptions() {
          listApplication({status: 'Y'}).then(response => {

          });
        },

      getEventTeamList(){
        var param={status:'Y'};
        eventTeamDataFun(param).then(response => {
          this.teamOptions = response.data;
          this.appType=this.teamOptions[0].id;
          this.uploadData.appCode=this.appType;
        });
      },

      appTypeChangeFun(v){
        this.uploadData.appCode=this.appType;
      },
        //上传失败
        uploadFileError(err, file, fileList){
            this.$message.error("上传失败！")
        },
        //上传成功
        uploadFileSuccess(response, file, fileList){
            if(response.code===200){
                this.errorListData=response.data.errerList;
                this.errorMessage=response.data.message;
            }else{
                this.$message.error(response.data.msg);//文件上传错误提示
            }
        }
    }
};
</script>

<style lang="scss" scoped="scoped">
#template {
    padding: 20px;
    height: calc(100vh - 85px);
    .title {
        font-size: 20px;
        font-weight: normal;
    }
    .el-divider {
        margin: 0;
    }
    h2 {
        font-size: 16px;
        font-weight: normal;
    }
    p {
        color: red;
        margin-bottom: 30px;
    }
}
</style>
